<template>
  <a-cascader
    :value="selectedValues"
    :field-names="{ label: 'name', value: 'code', children: 'children' }"
    :options="areaData"
    v-bind="$attrs"
    @change="onChange"
  />
</template>
<script>
import areaData from './province'
export default {
  name: 'Province',
  props: {
    modelValue: {
      type: String,
      required: false
    }
  },
  emits: ['change', 'update:modelValue'],
  data() {
    return {
      // 地区数据
      areaData,
      // 选择的数据
      selectedValues: this.modelValue
        ? [this.modelValue.substring(0, 2), this.modelValue.substring(0, 4), this.modelValue]
        : []
    }
  },
  watch: {
    modelValue(newValue) {
      if (newValue) {
        this.selectedValues = [newValue.substring(0, 2), newValue.substring(0, 4), newValue]
      } else {
        this.selectedValues = []
      }
    }
  },
  methods: {
    // 选择好之后的回调
    onChange(value) {
      this.$emit('update:modelValue', value[2])
      this.$emit('change', value[2])
    }
  }
}
</script>
<style lang="scss" scoped></style>
